<!--
 - Copyright 2022. Huawei Technologies Co., Ltd. All rights reserved.

 - Licensed under the Apache License, Version 2.0 (the "License");
 - you may not use this file except in compliance with the License.
 - You may obtain a copy of the License at

 -   http://www.apache.org/licenses/LICENSE-2.0

 - Unless required by applicable law or agreed to in writing, software
 - distributed under the License is distributed on an "AS IS" BASIS,
 - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 - See the License for the specific language governing permissions and
 - limitations under the License.
 -->

<!-- AI课程推荐页面 -->
<template>
    <div>
        <HeadLine :headName="$t('BDT_fascialgun_course_recommendation')" @backClick="backClick" />
        <div class="recommend_container" :style="style">
            <Loading v-if="loading" />
            <AnalysisResults
                v-if="!loading"
                style="margin-top: 0.8rem"
                :hasResult="haveDatas"
                :analysisContent="analysisContent"
            />
            <TopRecommend v-if="!loading && haveDatas" />
        </div>
    </div>
</template>

<script>
import HeadLine from "../components/HeadLine";
import Loading from "../components/Loading";
import AnalysisResults from "../components/AnalysisResults";
import TopRecommend from "../components/TopRecommend";

export default {
    data() {
        return {
            // 加载状态
            loading: true,
            // 有无数据状态
            haveDatas: false,
            analysisContent: "无尽期运动记录，暂无课程推荐",// 参考src/assets/i18n/lang目录和main.js文件，将字段添加到对应语种的对象中
            style: {
                marginTop: (px2rem(window.topHeight)+5.6) + 'rem'
            }
        };
    },
    components: {
        HeadLine,
        Loading,
        AnalysisResults,
        TopRecommend,
    },
    mounted() {
        setTimeout(() => {
            this.loading = false;
        }, 1500);
        setTimeout(() => {
            this.haveDatas = true;
            this.analysisContent = "你的以下肌肉群需要放松，请根据推荐课程使用筋膜枪";
        }, 3000);
    },
    methods: {
        //返回
        backClick() {
            this.$router.go(-1);
        },
    },
};
</script>

<style scoped>
.recommend_container {
    padding: .8rem 1.2rem 0;
    position: fixed;
    top: 0;
    left: 0;
    width: -webkit-fill-available;
    height: -webkit-fill-available;
    overflow: hidden scroll;
}
</style>
